<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <title>jQuery.pulse.js Color meditator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <script src="https://jquery-resources.googlecode.com/svn/trunk/js/jquery-1.7.2.min.js"></script>
   <script src="https://jquery-resources.googlecode.com/svn/trunk/js/jquery-ui-1.8.19.min.js"></script>
  <script src="https://jquery-resources.googlecode.com/svn/trunk/js/jquery.pulse.js">

</script>
<!-- pulse -->
<script type="text/javascript">
  var upperShade ='#FB8932';
  var lowerShade ='#FFDDC3';

    $(function () {
      $.SyntaxHighlighter.init();
	 	pulse();
    });


function pulse(){
 var times = $('#times').val();
 var el = $('body');
		el.pulse(
		  {
			backgroundColor : upperShade,
			color           : lowerShade
		  },
		  {
			interval    : 2000,
			pulses      : times,
			duration : 5250
		  }
		);
}

  function changeColor(){
   var col = $('#color').val();

   if(col=='green'){
		 upperShade ='#8CFC9D';
  		 lowerShade ='#D0FFD7';
   }else  if(col=='orange'){
  		 upperShade ='#FB8932';
  		 lowerShade ='#FFDDC3';
   }else  if(col=='yellow'){
  		 upperShade ='#FCF665';
  		 lowerShade ='#FCFACB';
   }else  if(col=='red'){
  		 upperShade ='#FF683A';
  		 lowerShade ='#FCD7CB';
   }else  if(col=='blue'){
  		 upperShade ='#5C90FF';
  		 lowerShade ='#DCE7FF';
   }

   $('body').css('background', lowerShade);
   pulse();
  }

  </script>

  <style>
    .hidden {
      display : none;
    }

    .demo {
      margin : 2em 0;
    }

    .description {
      margin    : 2em auto;
      width     : 60%;
      font-size : 130%;
    }
  </style>

  <!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
<body style="background:#FFf">
<div class="wrapper">


    <div id="demo9" class="demo">
      <p class="target" style="display:none">This shows the use of the return delay. The background color will pulse between white and purple with 1s delays between all animations</p>


    </div>

</div>
<script src="./jQuery color.pulse.js by jsoverson_files/scale.fix.js"></script>
<div style="top:600px;opacity:0.2">
<select id="color" onChange="javascript:changeColor()">
	<option value="green">Green</option>
	<option value="orange">Orange</option>
	<option value="yellow">Yellow</option>
	<option value="red">Red</option>
	<option value="blue">Blue</option>
</select>

<select id="times" onChange="javascript:changeColor()">
	<option value="1">1</option>
        <option value="10">10</option>
	<option value="50">50</option>
	<option value="100">100</option>
	<option value="1000">1000</option>
</select>
</div>
</body></html>